<template>
    <div class="front">
      <banner :banner="banner"></banner>
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-sy_lb1"></use>
      </svg>
      <div class="tips">
        <div class="t-bod">
          <svg class="pic" aria-hidden="true">
            <use xlink:href="#icon-sy_bz"></use>
          </svg>
          <span>17:00停止接当日配送订单</span>
        </div>
       <div class="t-bod">
         <svg class="pic" aria-hidden="true">
           <use xlink:href="#icon-sy_bz"></use>
         </svg>
         <span>东营市区内满¥29.8全程冷链配送</span>
       </div>
      </div>
      <ul class="thir">
        <li class="con" v-for="(item,index, key) in nav" :key="key" @click="toClass(item.target.tid)">
          <img class="pic" :src = item.icon>
          <p>{{item.name}}</p>
        </li>
      </ul>
      <div class="newArea">
        <div @click="toGift()">
          <svg class="pic" aria-hidden="true">
            <use xlink:href="#icon-shengridangao"></use>
          </svg>
          蛋糕劵礼包
        </div>
        <div @click="toChange()">
          <svg class="pic" aria-hidden="true">
            <use xlink:href="#icon-youhuiquan"></use>
          </svg>
          蛋糕劵兑换
        </div>
      </div>
      <div v-for="(sty, style) in goodAll" :key="style">
        <special
          v-if="sty.show_type === 'per_img'"
          :goodArr = sty
          :region = sty.id
        ></special>
        <classify
          v-if="sty.show_type === 'list'"
          :goodArr = sty
          :region = sty.id
        ></classify>
        <slide-good-list
          v-if="sty.show_type === 'list_slider'"
          :goodArr = sty
          :region = sty.id
        ></slide-good-list>
      </div>
      <store></store>
      <div class="classify">
        <div class="top">
          <div class="t-left">全部产品</div>
        </div>
        <van-list
          v-model="loading"
          :finished="finished"
          @load="onLoad"
        >
          <van-cell
            v-for="(good, key) in goodsAll"
            :key="key"
            class="cell"
          >
            <single-good :good="good" region="normal"></single-good>
          </van-cell>
        </van-list>
        <p v-if="finished" class="no-more">敬请期待更多产品</p>
      </div>
      <choose-attr></choose-attr>
      <qr :show="show"></qr>
      <div class="support">
        <svg class="logo" aria-hidden="true">
          <use xlink:href="#icon-sy_dtkj"></use>
        </svg>
        <p>牛逼科技<br>提供技术支持</p>
      </div>
    </div>
</template>

<script type="text/ecmascript-6">

  import Banner from '../../components/sale/banner.vue';
  import Special from '../../components/sale/special.vue';
  import Classify from '../../components/sale/classify.vue';
  import Store from '../../components/sale/company.vue';
  import ChooseAttr from '../../components/sale/chooseAttr.vue';
  import Qr from '../../components/sale/qrcode.vue';
  import SingleGood from '../../components/sale/singleGood.vue';
  import SlideGoodList from '../../components/sale/slideGoodList.vue';

    export default {
      components: {
        SlideGoodList,
        SingleGood,
        Qr,
        ChooseAttr,
        Store,
        Classify,
        Special,
        Banner},
      name: 'front',

        data() {
            return {
              banner: [],
              nav: [],
              goodAll: [], // 分区商品
              goodsAll: [], // 全部商品
              list: [],
              loading: false,
              finished: false,
              page: 0,
              show: false
            };
        },
        props: {},
        created() {
        },
      mounted() {
      // 是否关注公众号
        this.$Sale.focus().then(res => {
         // this.show = !res.data.subscribe;
          // this.show = false;
        }, () => {
        });
        // 获取轮播图，分区，分类数据
        this.$Sale.getAllList().then(res => {
          this.banner = res.data.slider;
          this.nav = res.data.nav;
          this.compareVal(this.nav);
          this.goodAll = res.data.region;
          this.compareVal(this.goodAll);
        }, () => {
        });
      },
        methods: {
          compareVal (value) {
            // 按权重排序
            value.sort(function compare (obj1, obj2) {
              let val1 = parseInt(obj1.weight);
              let val2 = parseInt(obj2.weight);
              if (val1 < val2) {
                return -1;
              } else if (val1 > val2) {
                return 1;
              } else {
                return 0;
              }
            });
          },
          onLoad () {
            let that = this;
            if (this.finished === false) {
              // 异步更新数据
              setTimeout(() => {
                let all = {
                  page: that.page,
                  size: 8,
                  type: 'simple'
                };
                that.$Sale.getAllGoods(all).then(res => {
                  this.page++;
                  that.goodsAll = that.goodsAll.concat(res.data);
                  if (res.data.length === 0) {
                    that.finished = true;
                  }
                  this.loading = false;
                }, () => {
                });
              }, 500);
            }
          },
          toClass(id) {
            this.$router.push(
              {
                name: 'elm',
                query: {
                  tid: id
                }
              });
          },
          toGift() {
            this.$router.push(
              {
                name: 'gift'
              });
          },
          toChange() {
            this.$router.push(
              {
                name: 'userConvert'
              });
          }
        },
        computed: {},
        watch: {}
    };
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "../../assets/stylus/main.styl";
  .icon
    fill: #fff;
    width: 100vw;
    position: relative;
    height: vw(10);
    margin-top: vw(-8);
  .tips
    color main-color
    background-color #fff
    margin-top -1px
    font-size vw(10)
    text-align center
    height vw(30)
    display: flex;
    align-items: center;
    justify-content: space-around;
    .t-bod
      display flex
      align-items center
      .pic
        fill main-color
        width vw(10)
        height vw(10)
        display inline-block
  .thir
    display flex
    padding vw(15)
    align-items center
    background-color #fff
    .con
      width 33.3%
      text-align center
      .pic
        width vw(56)
        height vw(56)
        fill: main-color
      p
        font-size vw(12)
        color #999
  .newArea
    display flex
    padding vw(15) vw(40)
    align-items center
    background-color #fff
    justify-content space-between
    div
      width vw(140)
      height vw(30)
      border-radius vw(15)
      border 1px solid #e2e2e2
      justify-content center
      font-size vw(12)
      color #333
      display flex
      align-items center
      .pic
        width vw(16)
        height vw(14)
        fill: main-color
        margin-right vw(10)
  .support
    color #d9d9d9
    background-color #fff
    text-align center
    font-size vw(10)
    display flex
    justify-content center
    align-items center
    padding-bottom vw(50)
    padding-top vw(50)
    .logo
      width vw(20)
      height vw(20)
      fill #d9d9d9
  .classify
    background-color #fff
    padding-top vw(10)
    position relative
    .top
      display flex
      justify-content space-between
      height vw(30)
      line-height vw(30)
      padding 0 vw(15)
      .t-left
        font-size vw(14)
        color #333
      .t-right
        font-size vw(10)
        color #999
    .no-more
      word-vw(12, third-ash);
      flex-center();
      margin-top 10px
      padding-bottom: 5vw;
      background-color #fff
    .van-cell
      padding 0
</style>
